// 1. 导入所需模块
import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入组件
import MyHome from '@/components/MyHome.vue'
import MyMovie from '@/components/MyMovie.vue'
import MyMusic from '@/components/MyMusic.vue'
import MyAbout from '@/components/MyAbout.vue'
import AboutMe from '@/components/AboutMe'
import AboutYou from '@/components/AboutYou'
import NotFound from '@/components/NotFound'

// 2. 调用 Vue.use() 函数，将 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)

// 3. 创建路由的实例对象
const router = new VueRouter({
  // 配置使用哪种模式，默认就是 hash 模式
  mode: 'history', // 配置成历史模式
  // 写路由规则 (hash 地址 ----> 要展示的组件 对应关系 )
  routes: [
    { path: '/', redirect: '/home' }, // 重定向，当访问 / 的时候，将hash地址转到 /home
    { path: '/home', component: MyHome },
    { path: '/movie/:id/:name', component: MyMovie }, //路径参数
    { path: '/music', component: MyMusic }, //query参数
    {
      path: '/about', component: MyAbout, children: [
        // children里面的path，就不用写 / 了。最终的 hash 地址，是 父子hash地址拼接的结果
        // 也就是说，关于我 的地址是 /about/me   关于你 的地址是 /about/you
        // 如果子规则地址，以 / 开头，则最终的地址 【不会】 拼接
        { path: '/about/me', component: AboutMe },
        { path: 'you', component: AboutYou },
      ]
    },
    // 针对访问错误，给出404提示
    { path: '*', component: NotFound }
  ]
})

// 4. 导出路由的实例对象
export default router